<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container{
            width: 500px;
            margin: 0 auto;
            margin-top:50px;
            text-align: center;
        }
        .list{
            width:100%;
            height: 80px;
            overflow: hidden;
        }
        .list li{
            width:33.33333333333333333333333333333%;
            float: left;
            background: red;
            line-height: 80px;
        }
        .list li:nth-child(2){
            background: orange;
        }
        .list li:nth-child(3){
            background: peru;
        }

        .moudel{
            width:100%;
        }
        .moudel div{
            width:100%;
            height:300px;
            background: red;
            line-height:300px;
            display: none;
        }
        .moudel div:nth-child(2){

            background: orange;
        }
        .moudel div:nth-child(3){

            background: peru;
        }
        .moudel .active{
            display: block;
        }

    </style>
</head>
<body>
<div class="container">
    <ul class="list">
        <li>手机</li>
        <li>电脑</li>
        <li>家电</li>
    </ul>
    <div class='moudel'>
        <div class="active">手机模块</div>
        <div>电脑模块</div>
        <div>家电模块</div>
    </div>
</div>


<script>
    var lis=document.getElementsByClassName('list')[0].children;
    var divs=document.getElementsByClassName('moudel')[0].children;
    for(var a=0;a<lis.length;a++){
        lis[a].setAttribute('id',a);
        lis[a].onmousemove=function(){
            for(var j=0;j<lis.length;j++){
                divs[j].className='';
            }
            divs[this.getAttribute('id')].className='active';
        }
    }
</script>
</body>
</html>